<template>
	<view class="button_out" :style="'width:' + outwidth + 'upx;height:' + outwidth + 'upx'">
		<view
			class="button"
			id="_drag_button"
			@touchmove="move($event)"
			@touchstart="start($event)"
			@touchcancel="cancel"
			@touchend="end"
			:style="'left: ' + left + 'px; top:' + top + 'px;width:' + inwidth + 'upx;height:' + inwidth + 'upx'"
		></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			top: 0,
			left: 0,
			width: 0,
			height: 0,
			startx: 0,
			starty: 0
		};
	},
	props: {
		//判断大于多少upx时吸到外圆边上
		comparenum: {
			type: Number,
			default: 70
		},
		//外圆直径
		outwidth: {
			type: Number,
			default: 300
		},
		//内圆直径
		inwidth: {
			type: Number,
			default: 100
		},
		//手指超出外圆计算的比值，目测比(大圆-小圆的值一半)小一点点，可自行调试
		comparewidth: {
			type: Number,
			default: 95
		}
	},
	onLoad() {},
	methods: {
		do(a) {
			this.$emit('remote', a);
		},
		start(e) {
			this.startx = e.touches[0].clientX;
			this.starty = e.touches[0].clientY;
		},
		move(e) {
			const templeft = (e.touches[0].clientX - this.startx) * 1;
			const temptop = (e.touches[0].clientY - this.starty) * 1;
			if (Math.sqrt(Math.pow(templeft, 2) + Math.pow(temptop, 2)) >= this.comparenum) {
				let angle = Math.atan(Math.abs(templeft) / Math.abs(temptop));
				let rad = (180 * angle) / Math.PI;
				let cx = 0;
				let cy = 0;
				let r = this.comparewidth;
				//第一象限(右上)
				if (this.startx < e.touches[0].clientX && this.starty > e.touches[0].clientY) {
					cx = Math.cos(angle) * -r;
					cy = Math.sin(angle) * r;
				}
				//第三象限(左下)
				if (this.startx > e.touches[0].clientX && this.starty < e.touches[0].clientY) {
					cx = Math.cos(angle) * r;
					cy = Math.sin(angle) * -r;
				}
				//第四象限(右下)
				if (this.startx < e.touches[0].clientX && this.starty < e.touches[0].clientY) {
					cx = Math.cos(angle) * r;
					cy = Math.sin(angle) * r;
				}
				//第二象限(左上)
				if (this.startx >= e.touches[0].clientX && this.starty >= e.touches[0].clientY) {
					cx = Math.cos(angle) * -r;
					cy = Math.sin(angle) * -r;
				}

				//上
				if (e.touches[0].clientY - this.starty < 0 && rad < 22.5) {
					// console.log("上")
					this.do(1);
				}
				//右上
				if (e.touches[0].clientY - this.starty < 0 && rad >= 22.5 && rad < 67.5 && e.touches[0].clientX - this.startx > 0) {
					// console.log("右上")
					this.do(2);
				}
				//右
				if (e.touches[0].clientX - this.startx > 0 && rad >= 67.5) {
					// console.log("右")
					this.do(3);
				}
				//右下
				if (e.touches[0].clientY - this.starty > 0 && rad >= 22.5 && rad < 67.5 && e.touches[0].clientX - this.startx > 0) {
					// console.log("右下")
					this.do(4);
				}
				//下
				if (e.touches[0].clientY - this.starty > 0 && rad < 22.5) {
					// console.log("下")
					this.do(5);
				}
				//左下
				if (e.touches[0].clientY - this.starty > 0 && rad >= 22.5 && rad < 67.5 && e.touches[0].clientX - this.startx < 0) {
					// console.log("左下")
					this.do(6);
				}
				//左
				if (e.touches[0].clientX - this.startx < 0 && rad >= 67.5) {
					// console.log("左")
					this.do(7);
				}
				//左上
				if (e.touches[0].clientY - this.starty < 0 && rad >= 22.5 && rad < 67.5 && e.touches[0].clientX - this.startx < 0) {
					// console.log("左上")
					this.do(8);
				}
				this.left = cy;
				this.top = cx;
			} else {
				this.left = templeft;
				this.top = temptop;
			}
		},
		cancel() {
			this.left = 0;
			this.top = 0;
		},
		end() {
			this.left = 0;
			this.top = 0;
		}
	}
};
</script>

<style>
.button_out {
	border-radius: 50%;
	border: #555555 solid 5upx;
	display: flex;
	position: relative;
}

.button {
	border-radius: 50%;
	border: #555555 solid 2upx;
	background-color: #808080;
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	&.transition {
		transition: all 1s;
	}
}
</style>
